<template>
  <div class="contents">
    <PanelTitle title="批次信息" />
    <div class="mt">
      <div class="picinfo">
        <div class="pics">
          <img v-if="data && data.imageUrl" :src="data.imageUrl[0]" class="cover" alt="">
        </div>
        <div class="infos">
          作物名称： 太子参
          <br />
          作物品种： {{ data.medicinalName }}
          <br />
          种植规模： {{ data.acreage ? data.acreage : 0 }}亩
          <br />
          种植时间： {{ formatTime(data.startTime) }}
          <br />
          生长阶段：
          <label v-if="data.taskStatus == 1">未开始</label>
          <label v-if="data.taskStatus == 2">执行中</label>
          <label v-if="data.taskStatus == 3">已完成</label>

        </div>
      </div>
      <div class="info">
        {{ data.medicinalRemark }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import PanelTitle from "../../component/PanelTitle.vue";
import http from "@/api/http";
import { env } from "@/utils/env";

const props = defineProps(["plantTaskId"]);
const data = ref({ imageUrl: [] })
const getData = async () => {
  if (!props.plantTaskId) {
    return
  }
  let res = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/base/plant/task/detail/" + props.plantTaskId, // {taskId}
    method: "get",
  });
  
  if(res.data){
    data.value = res.data
  }
  
}
const formatTime = (str) => {
  if(!str){
    return ''
  }
  return str.split(' ')[0]
}
watch(() => props.plantTaskId, () => {
  getData()
})
</script>

<style scoped lang="scss">
.contents {
  background: linear-gradient(to bottom,
      rgba(5, 79, 99),
      rgba(5, 79, 99, 0.1),
      rgba(5, 79, 99));
  border-radius: vh(8);
  border: vh(1) solid rgba(6, 112, 180, 1);

  .mt {
    margin-top: vh(-40);
  }
}

.picinfo {
  display: flex;
  align-items: center;
  padding: vh(10) vw(20);

  .pics {
    width: vw(182);
    height: vh(121);
    border: vh(1) solid #22fdd5;
    text-align: center;
  }

  .cover {
    max-width: 100%;
    max-height: 100%;
  }

  .infos {
    font-weight: bold;
    font-size: vh(12);
    color: #feffff;
    line-height: vh(21);
    margin-left: vw(16);
    text-shadow: 0 0 vh(6) #22fdd5;
  }
}

.info {
  padding: vh(10) vw(20);
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: vh(14);
  color: #2cd7bc;
  line-height: vh(28);
}
</style>